new Vue({
	el: '#permissions',
	data: function () {
		return {
			searchForm: { //查询条件
				searchDate: this.getYesterday(),
                branch: '',
                cso: ''
            },
            branchs: [],//分公司
            CSOs: [],
            currentpage:1,//当前页数
            pageBean:[//分页参数列表
            ],
            myChart: '',
            showChart: false,
            noData: false, //暂无数据
            yearMonth: true, //年度or月度
            curr_name:"",
            last_name:"",
            activeName: 'drivingIndex',
            //驱动指标
            drivingIndexTable: [],
            //网点经营
            networkManageTable: [],
            //人力队伍
            staffTeamTable: [],
            bigStaffTeamTable:[],
            //趋势分析
            xAxisTrendAlalysis: {data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']}, 
            legendTrendAlalysis: ['签约物理网点', '网点活动率', '活动网均件数', '在职人数', '人员活动率', '活动人均件数', '件均保费（万）'],
            seriesTrendAlalysis: [],
		}
	},
	mounted: function () {
		this.getBranch()
		this.resizeChart()
		this.query()
	},
	methods: {
		/**下一页 上一页按钮 */
      	handleCurrentChange:function(val){
      		this.currentpage=val;
      		this.pageChange(val)
      	},
      	pageChange: function (val){
      		var _this = this;
      		var cur_page = val
      		var page_size = _this.pageBean.pageSize
      		var total_number = _this.pageBean.totalNumber
      		
      		console.info(cur_page+"-"+page_size+"-"+total_number)
      		
      		var size = 0
      		if(total_number/cur_page <= page_size){
      			size = (cur_page-1)*page_size+total_number%page_size
      		} else {
      			size = cur_page*page_size;
      		}
      		_this.staffTeamTable = []
      		for(var i=(cur_page-1)*page_size;i<size;i++){
      			_this.staffTeamTable.push(_this.bigStaffTeamTable[i])
      		}
      		
      	},
		//获取分公司
        getBranch:function(){
            var _this = this;
            $.ajax({
                url: '/statistical/objectif/findBranch',
                type: 'get',
                dataType: 'json',
                async: false,//同步
                success: function (res) {
                	_this.branchs = res.data
                },
                error: function (err) {
                	if(err.responseJSON.message=="session clean"){
                        errorMessage(_this.$message, '登陆已失效重新登陆!');
                        toLogin();
                        return;
                    }
                    errorMessage(_this.$message, '查询分公司出错！错误代码：'+(err.status))
                }
            })
        },
    	//昨天日期
    	getYesterday: function(){
        	var d = new Date();
        	var t = d.getTime()-1000*60*60*24;
        	var yesterday = new Date(t);
        	return yesterday;
        },
        /**
         * 改变分公司
         * @param value
         */
    	changeBranch: function (value) {
    		this.searchForm.cso = ""
        		var _this = this;
                if(value!=''){
                	$.ajax({
                        url: '/statistical/objectif/findCSO',
                        data:{"data":value},
        	            type: 'post',
        	            dataType: 'json',
                        success: function (res) {
                        	_this.CSOs = res.data;
                        },
                        error: function (err) {
                        	if(err.responseJSON.message=="session clean"){
                                errorMessage(_this.$message, '登陆已失效重新登陆!');
                                toLogin();
                                return;
                            }
                            errorMessage(_this.$message, '查询支公司出错！错误代码：'+(err.status))
                        }
                    })
                }
        },
        //清空
    	resetSearchForm: function (formName) {
    	    this.searchForm.searchDate = this.getYesterday()
      		this.$refs[formName].resetFields()
      	},
      	switchYEARorMONTH: function() {
      		console.info("年度 :true;月度 :false -- :"+this.yearMonth)
      		this.query()
      	},
      	query: function(){
      		var _this = this;
      		 _this.mapName = "";
      		if(_this.searchForm.branch=="" && _this.searchForm.cso!=""){
      			errorMessage(_this.$message, "请选择分公司");
      			return;
      		}
        	if(_this.searchForm.searchDate==null){
        		_this.searchForm.searchDate = this.getYesterday()
        	}
        	if (this.myChart && this.myChart.dispose) {
        		this.myChart.showLoading()
        	}
        	console.info('调用查询:'+JSON.stringify(_this.searchForm))
        	$.ajax({
	             url: '/statistical/drivingIndex/findData',
	             data:{"data":JSON.stringify(_this.searchForm),"yearFlag":this.yearMonth},
	             type: 'post',
	             async: true,
	             dataType: 'json',
	             beforeSend: function () {
	            	 $('.theme-loader').show()
	             },
	             success: function (res) {
	            	 $('.theme-loader').hide()
	            	 _this.drivingIndexTable = res.data.drivingData
	            	 _this.curr_name = res.data.curr_name
	            	 _this.last_name = res.data.last_name
	            	 _this.seriesTrendAlalysis = res.data.seriesTrendAlalysisData
	            	 _this.networkManageTable = res.data.networkData
	            	 _this.bigStaffTeamTable = res.data.staffTeamData
	            	 
		             var page = {}
		             page['totalNumber'] = res.data.totalNumber
		             page['pageSize'] = res.data.pageSize
		             _this.pageBean = page
		             
		             //人力队伍前端分页
		             _this.pageChange(1)
		             
	            	 _this.draw(_this.activeName)
	             },
	             error: function (err) {
	            	    $('.theme-loader').hide()
	                	if(err.responseJSON.message=="session clean"){
	                        errorMessage(_this.$message, '登陆已失效重新登陆!');
	                        toLogin();
	                        return;
	                    }
	                    errorMessage(_this.$message, '查询出错！错误代码：'+(err.status))
	            }
        	})
      	},
		handleClick: function (tab) {
			this.draw(tab.name)
		},
		draw:function(tabname){
			switch(tabname) {
				case 'trendAlalysis':
					this.initChartLine('', this.xAxisTrendAlalysis, this.legendTrendAlalysis, this.seriesTrendAlalysis)
					this.showChart = true
					this.myChart.hideLoading()
					break;
				default:
					this.showChart = false
			}
		},
		resizeChart: function () { //计算eChart画布尺寸
            this.$refs['myChart'].style.width = document.querySelector('.card-body').offsetWidth - 230 + 'px'
            this.$refs['myChart'].style.height = 600 + 'px'
        },
        initChartLine: function (title, xAxis, legendData, series) { //柱状图
            var _this = this
            this.myChart = echarts.init(this.$refs['myChart'])
            var option = {
                title: {
                    text: title,
                    left: 'left',
                    textStyle: {
                        fontSize: 22
                    }
                },
                color: ['#d2001f', '#2a4556', '#4fa3ab'], //调色盘
                legend: {
                    data: legendData, //图例项名称
                    right: 60
                },
                tooltip: { //提示框组件
                    show: true,
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    right: 20,
                    feature: {
                        saveAsImage: { //保存图片
                            type: 'png',
                            name: title,
                            title: '保存为图片',
                            show: true
                        }
                    }
                },
                grid: {
                    left: 50, //离容器左侧距离
                    right: 30,
                    bottom: 100
                },
                xAxis: xAxis,
                yAxis: {},
                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 100,
                    bottom:0
                }],
                series: series
            }
            this.myChart.clear()
            this.myChart.setOption(option)
            window.onresize = function () {
                _this.resizeChart()
                _this.myChart.resize()
            }
            
            if (series.length <=1 && series[0].data.length <1) {
            	this.myChart.clear()
            	this.noData = true
            } else { 
            	this.noData = false
            }
        }
	}
})